<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录注册页面</title>
		
	</head>
		<link rel="stylesheet" href="外部样式.css" type="text/css"/>
	<style>
		/* ID选择器 */
		
		
	</style>
	<body >
		<!-- 标签元素中的常用属性id（唯一的）、class,class是类属性，可以有多个同类型的同名类 -->
		<div id="LoginAndReg" class="Info">
			 <!-- div#*2 
			<div id=""></div>
			<div id=""></div>
			 div.xx 
			<div class="xx"></div> -->
			<div id="top">
				<p>
					<strong >注册登录</strong>
					<span>X</span>
				</p>
			</div>
			<div id="bottom">
				<!-- form>div#smsVerification>div*8 -->
				<form action="http://www.baidu.com" method="post">
					<div>
						<h2 id="wxdl" style="display: none;">注册登录</h2>
						<h2 id="zhuce" >注册登录</h2>
						<h2 id="passworddl" style="display: none">用户登录</h2>
					</div>
					<div id="verificationLoginAndRge">
						<!-- 微信/短信/密码登录 -->
							<!-- <div id="weixin"></div>
							<div id="duanxin"></div>
							<div id="mima"></div> 
						-->
							<!-- 微信登录  todo-->
							<div id="WexinVerification" style="display: none;">
								<div >
									<div id="QRcode">
											<img src="" alt="这是一张二维码" width="400px" height="400px"/>
									</div>
								</div>
								<div>
									<div id="wexinbutton01">
										<button>微信快捷登录</button>
									</div>
								</div>
								<div>
									<div id="weixintext">
											<span>微信扫码登录</span>
									</div>
								</div>
							</div>
							<!-- 短信验证 -->
							<div id="smsVerification">
								<div >
									<!-- div#phone>input[type='tel']+span#phoneErr-->
									<div id="phone">
										<input type="tel" placeholder="手机号"/>
										<span id="phoneErr"></span>
									</div>
								</div>
								<div>
									<div id="message">
										<input id="sms" type="text"  name="" class="" placeholder="短信验证码" >
										<input id="getsms" type="button" value="获取验证码"/>
										<span id="phoneErr"></span>
									</div>	
								</div>
								<div class="text">
									<span>新手机号自动注册</span>
								</div>
							</div>
							<!-- 密码登录  todo-->
							<div id="Password" style="display: none;">
								<div>
									<div id="TelOrEmail">
										<input type="text" placeholder="手机号或邮箱"/>
										<span id="phoneErrOrpassword"></span>
									</div>
								</div>	
								<div>
									<div id="pass">
										<input type="text" placeholder="密码"/>
										<span id="passw0rd"></span>
									</div>
								</div>
								<div>
									<div id="forPassword">
										<span><a href="https://segmentfault.com/user/forgot">忘记密码？</a></span>
									</div>
								</div>
								
							</div>
							<div></div>
							<div class="commBottom">
									<div id="denglu">
										<input type="submit" class="dl" value="登录"/>
									</div>
							</div>
							<div class="commBottom">
								<div id="LoginType">
									<button class="weixin">微信登录</button><span> |</span>
									<button class="duannxin">免密码登录</button><span> |</span>
									<button class="mima">密码登录</button>
								</div>
							</div>
							<div class="commBottom">
								<div id="moreLoginType">
									<button class="google">G</button>
									<button class="github">GIT</button>
									<button class="weibo">WB</button>
									<button class="more">···</button>
								</div>
								
							</div>
							<div class="commBottom">
									<span class="xieyi">
										继续即代表同意
										<a href="https://segmentfault.com/tos" target="_blank">《服务协议》</a>
										<span class="xieyi">和</span>
										<a href="https://segmentfault.com/privacy" target="_blank">《隐私政策》</a>
									</span>
							</div>
					</div>
					<!-- 切换界面todo -->
					<!-- <div id="change01"></div>
					<div id="change02"></div>
					<div id="change03"></div> -->
				</form>
			</div>
		</div>
	</body>
</html>